var canvasWidth = 877; //声明画布宽度
var canvasHeight = 972; //声明高度
var canvas = document.getElementById('canvas'); //获取画布
canvas.width = canvasWidth; //
canvas.height = canvasHeight; //
var context = canvas.getContext('2d'); //准备画笔
var image = new Image(); //创建图片对象
var radius = 60; //声明半径
image.src = 'image/王一博.jpg' //获取图片路径
image.onload = function() {
    initCanvas(); //调用初始化画布方法（函数）
}

function initCanvas() {
    //擦除整个画布内容
    context.clearRect(0, 0, canvasWidth, canvasHeight)
        //保存画布的绘制状态
    context.save();
    console.log('保存画布的绘制状态')

    context.beginPath(); //初始化路径
    //获取圆心，绘制圆形，使其在画布中
    var x = Math.random() * (canvas.width - 2 * radius) + radius;
    var y = Math.random() * (canvas.height - 2 * radius) + radius;
    context.arc(x, y, radius, 0, 2 * Math.PI, true)
    context.clip(); //用clip（）方法剪切圆形区域
    context.drawImage(image, 0, 0);



    //恢复canvas之前保存的状态
    context.restore()
    console.log('恢复canvas之前保存的状态')

}

function reset() {
    initCanvas();
    console.log('想看我么');

}

function show() {
    radius = 4 * Math.max(canvas.width, canvas.height);
    console.log(radius)
    initCanvas();
}